<template>
  <el-message
    v-model="visible"
    :center="center"
    :custom-class="customClass"
    :duration="duration"
    :grouping="grouping"
    :message="message"
    :offset="offset"
    :show-close="showClose"
    :type="type"
    @click="handleClick"
    @close="handleClose"
  />
</template>
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { ref, watch } from 'vue'

const props = withDefaults(
  defineProps<{
    modelValue: boolean
    message: string
    type?: 'success' | 'warning' | 'info' | 'error'
    duration?: number
    showClose?: boolean
    center?: boolean
    offset?: number
    customClass?: string
    grouping?: boolean
    onClick?: () => void
    onClose?: () => void
  }>(),
  {
    type: 'info',
    duration: 3000,
    showClose: true,
    center: false,
    offset: 16,
    customClass: '',
    grouping: false,
  }
)

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
}>()

const visible = ref(props.modelValue)

// 监听 modelValue 变化
watch(
  () => props.modelValue,
  (val) => {
    visible.value = val
  }
)

// 监听 visible 变化
watch(
  () => visible.value,
  (val) => {
    emit('update:modelValue', val)
  }
)

// 处理点击
const handleClick = () => {
  if (props.onClick) {
    props.onClick()
  }
}

// 处理关闭
const handleClose = () => {
  if (props.onClose) {
    props.onClose()
  }
}
</script>
